<template>
  <div class="mon_sec">
    <div class="chartarea">
      <img :src="exampng" style="width: 100%;height: 100%;"/>
      <!--<div class="chartitem">-->
      <!--<div class="charttitle">-->
      <!--人员库比例-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="chartitem">-->
      <!--<div class="charttitle">-->
      <!--人脸采集数量-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="chartitem">-->
      <!--<div class="charttitle">-->
      <!--比对次数统计-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <div class="maparea" @click="getMousePos">
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scrollWheelZoom="scrollwheelzoom"
                 :mapType="mapType" :mapStyle="mapStyle">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        <bm-marker :position="{lng: 121.4, lat: 31.201}" :icon="padicon" :dragging="false" title="终端监控"
                   @click="toTerminal">
          <!--<bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen" title="15:37">-->
            <!--<div style="position: relative;">-->
              <!--<img :src="nobodypng" style="width: 100%;height: 100px;"/>-->
              <!--<p>-->
                <!--摄像头1-->
              <!--</p>-->
              <!--<p>-->
                <!--浦东新区·杨高路峨山路口-->
              <!--</p>-->
            <!--</div>-->
          <!--</bm-info-window>-->
          <!--<bm-label content="古北" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>-->
        </bm-marker>
        <bm-marker :position="{lng: 121.51, lat: 31.251}" :icon="icon" :dragging="false" title="摄像头监控"
                   @click="toCamera">
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        center: {lng: 0, lat: 0},
        zoom: 0,
        // 滚轮缩放
        scrollwheelzoom: true,
        // 地图类型
        mapType: 'BMAP_NORMAL_MAP',
        // 地图样式
        mapStyle: {
          styleJson: [
            {
              'featureType': 'all',
              'elementType': 'geometry',
              'stylers': {
                'color': '#0E225F'
//                'saturation': 100
              }
            },
            {
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#091533'
              }
            },
            {
              'featureType': 'road',
              'elementType': 'all',
              'stylers': {
                'color': '#091533'
              }
            }
          ]
        },
        show: false,
        navagiteType: 'BMAP_NAVIGATION_CONTROL_ZOOM',
        nobodypng: require('@/assets/img/test1.jpg'),
        exampng: require('@/assets/img/monitor/example.png'),
        icon: {url: require('@/assets/img/camera-icon.png'), size: {width: 46, height: 56}},
        padicon: {url: require('@/assets/img/pad-icon.png'), size: {width: 46, height: 56}}
      }
    },
    methods: {
      handler({BMap, map}) {
        console.log(BMap, map)
        this.center.lng = 121.4
        this.center.lat = 31.2
        this.zoom = 12
      },
//      infoWindowClose() {
//        this.show = false
//      },
//      infoWindowOpen() {
//        this.show = true
//      },
      getMousePos(event) {
        var e = event || window.event
        console.log('x:' + e.clientX + ', y:' + e.clientY)
      },
      toTerminal() {
        this.$router.push('/face')
      },
      toCamera() {
        this.$router.push('/monitor')
      }
    },
    mounted() {
    }
  }
</script>
